<template>
  <div class="bill-detail-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>账单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="账单编号">{{ billDetail.billId }}</el-descriptions-item>
        <el-descriptions-item label="账单类型">{{ billDetail.billType }}</el-descriptions-item>
        <el-descriptions-item label="费用名称">{{ billDetail.pricingName }}</el-descriptions-item>
        <el-descriptions-item label="单价">{{ billDetail.settingPrice }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ billDetail.billNumber }}</el-descriptions-item>
        <el-descriptions-item label="应收金额">{{ billDetail.billSum }}</el-descriptions-item>
        <el-descriptions-item label="实收金额">{{ billDetail.actualAmount }}</el-descriptions-item>
        <el-descriptions-item label="缴费状态">{{ billDetail.billStatus | statusFilter }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ billDetail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="缴费时间">{{ billDetail.payTime }}</el-descriptions-item>
      </el-descriptions>

      <div class="action-buttons">
        <el-button type="primary" @click="handlePrint">打印</el-button>
        <el-button type="danger" @click="handleRefund">退款</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: 'BillDetail',
  data() {
    return {
      billDetail: {}
    }
  },
  created() {
    this.getBillDetail();
  },
  methods: {
    getBillDetail() {
      // const billId = this.$route.query.billId;
      // request.get(`/bill/detail/${billId}`)
      //   .then(res => {
      //     if (res.code === 200) {
      //       this.billDetail = res.data;
      //     }
      //   });
    },
    goBack() {
      this.$router.go(-1);
    },
    handlePrint() {
      // 打印逻辑
    },
    handleRefund() {
      // 退款逻辑
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '未支付',
        1: '已支付',
        2: '已退款',
        3: '已取消'
      };
      return statusMap[status] || '未知状态';
    }
  }
}
</script>

<style scoped>
.bill-detail-container {
  padding: 20px;
}

.box-card {
  max-width: 1000px;
  margin: 0 auto;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
}
</style>
